<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Socket.IO chat</title>
    <script>
        !function (n) {
            var e = n.document,
                t = e.documentElement,
                i = 720,
                d = i / 100,
                o = "orientationchange" in n ? "orientationchange" : "resize",
                a = function () {
                    var n = t.clientWidth || 320;
                    n > 720 && (n = 720);
                    t.style.fontSize = n / d + "px"
                };
            e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
        }(window);
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: .24rem Helvetica, Arial;
        }

        form {
            background: #eee;
            padding: 6px;
            position: fixed;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
            padding-bottom: 16px;
        }

        form textarea {
            box-sizing: border-box;
            width: 100%;
            height: 2rem;
            border: none;
            padding: 0.2rem;
            font-size: .24rem;
            outline: none;
            resize:none
        }

        form button {
            width: 100%;
            height: 1rem;
            background: rgb(130, 224, 255);
            border: none;
            padding: .1rem;
            text-align: center;
            box-sizing: border-box;
            border-radius: 0 0 10px 10px;
            color: #fff;
            font-size: .4rem;
            font-weight: bold;
            outline: none;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
            padding-bottom: 3.6rem;
        }

        .msg {
            box-sizing: border-box;
            width: 80%;
            margin-left: .4rem;
            margin-top: .2rem;
            position: relative;
        }

        .msg-content {
            display: inline-block;
            min-width: 20%;
            max-width: 80%;
            background: #eee;
            border-radius: 10px;
            padding: .1rem .2rem;
            border: 1px;
            position: relative;
            word-break: break-all;
            word-wrap: break-word
        }

        .msg:before {
            content: '\2794';
            display: block;
            position: absolute;
            left: -.3rem;
            top: 50%;
            margin-top: -.2rem;

        }
        .toast{
            min-width: 1rem;
            max-width: 80%;
            position: fixed;
            left: 50%;
            top:50%;
            background: rgba(0,0,0,.6);
            padding: .1rem .16rem;
            border-radius: 5px;
            transform: translate(-50%,-50%);
            color:#fff;
        }
        .fadein {
            animation: animate_in 0.25s;
        }
        .fadeout {
            animation: animate_out 0.25s;
            opacity: 0;
        }
        @keyframes animate_in {
            0% {
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }
        @keyframes animate_out {
            0% {
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
        [v-cloak] {
          display: none;
        }

    </style>
</head>
<body>
<div id="app" v-cloak>
    <ul id="messages">
        <li class="msg" v-for="msg in messages">
            <div class="msg-content" :data-clipboard-text="msg">{{msg}}</div>
        </li>
    </ul>
    <form @submit.prevent="onSubmit" action="">
        <textarea id="m" autocomplete="off" v-model="input" ></textarea>
        <button>Send</button>
    </form>
    <div class="toast" v-show="toast" :class="{'fadein': toastShow, 'fadeout': !toastShow}">{{toast}}</div>
</div>


<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script crossorigin="anonymous" integrity="sha384-DwsLA0O/He+RjlS7pFkqEHfsCgdTMU+nSuUq/qkxvKSTED+s4vRttKEZtf4xTW1+" src="https://lib.baomitu.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            socket: null,
            toast: '',
            toastShow: false,
            input: '',
            messages: [],
            lastClickTime: 0,
            clickTimer: null,
            clipboard: null
        },
        created: function () {
            var that = this
            that.socket = io();
            that.socket.on('chat message', function (msg) {
                that.receiveMsg(msg)
            })
            that.clipboard = new ClipboardJS('.msg-content')
            that.clipboard.on('success', function (e) {
                that.showToast('复制成功')
                e.clearSelection();
            })
            that.clipboard.on('error', function (e) {
                that.showToast('复制失败')
                e.clearSelection();
            })
        },
        methods: {
            onSubmit: function () {
                if (!this.isNull(this.input)) {
                    this.socket.emit('chat message', this.input);
                    this.input = ''
                } else {
                    this.showToast('请输入要发送的信息')
                }
            },
            receiveMsg: function (msg) {
                this.messages.push(msg)
                window.scrollTo(0, document.body.scrollHeight);
            },
            showToast: function(msg) {
                this.toast = msg
                this.toastShow = true
                var _this = this
                setTimeout(function () {
                    _this.toastShow = false
                },2500);
                setTimeout(function () {
                    _this.toast = ''
                },3000)
            },
            isNull: function (str) {
                if (str == "") return true;
                var regu = "^[ ]+$";
                var re = new RegExp(regu);
                return re.test(str);
            }

        }
    });
</script>
</body>
</html>
